<template>
  <div class="cropper">
    <span class="icon iconfont icon-delete" @click="callCloseWindow"></span>
    <div class="cropper-content">
      <div class="cropper-item">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixedBox="option.fixedBox"
          :centerBox="option.centerBox"
          :fixed="option.fixed"
          @realTime="realTime"
        ></vueCropper>
      </div>
      <div class="preview">
        <div class="preview-img">
          <img :src="resultImg" alt />
        </div>
        <div class="upload-btn">
          <label for="imgInput">
            <div class="upload">上传图片</div>
          </label>
          <input
            type="file"
            id="imgInput"
            :value="imgFile"
            style="position:absolute; clip:rect(0 0 0 0);"
            accept="image/png, image/jpeg, image/gif, image/jpg"
            @change="uploadImgg($event)"
          />
          <!-- <input type="file" id="imgInput" :value="imgFile" style="display: none;" accept="image/png, image/jpeg, image/gif, image/jpg"/> -->
        </div>
        <div class="firm-btn" @click="callImgData">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      option: {
        img: "",
        outputSize: 1,
        full: false,
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: false,
        autoCrop: true,
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true,
        centerBox: false,
        fixed: true
      },
      resultImg: "",
      imgFile: ""
    };
  },
  methods: {
    clearData() {
      this.option.img = "";
      this.resultImg = {};
      this.imgFile = "";
    },
    realTime() {
      this.$refs.cropper.getCropData(data => {
        this.resultImg = data;
      });
    },
    //选择本地图片
    uploadImgg(e) {
      var _this = this;
      //上传图片
      var file = e.target.files[0];
      _this.fileName = file.name;
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        this.$message({
          message: "图片类型必须是.gif,jpeg,jpg,png,bmp中的一种",
          type: "warning"
        });
        return false;
      }
      var reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        _this.option.img = data;
      };
      // 转化为base64
      reader.readAsDataURL(file);
      // 转化为blob
      //   reader.readAsArrayBuffer(file);
    },
    callCloseWindow() {
      this.$emit("closeEjectWindows");
      this.clearData();
    },
    callImgData() {
      this.$emit("setImg", this.resultImg);
      this.callCloseWindow();
    }
  }
};
</script>

<style scoped>
.cropper {
  position: relative;
  background-color: rgb(230, 230, 230);
  z-index: 1;
  box-shadow: 5px 5px 2px rgb(157, 155, 155), 5px -5px 2px rgb(157, 155, 155),
    -5px 5px 2px rgb(157, 155, 155), -5px -5px 2px rgb(157, 155, 155);
}

.icon-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #cfcfcf;
}

.cropper-content {
  display: flex;
}

.cropper-item {
  width: 200px;
  height: 200px;
  margin: 30px;
}

.preview {
  margin: 30px 0;
}

.preview-img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: #fff;
}

.preview-img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.upload-btn {
  margin-top: 25px;
}

.upload {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

.firm-btn {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin-top: 15px;
  border-radius: 5px;
  color: #fff;
  background-color: #1aad19;
  cursor: pointer;
}
</style>